<!-- 全屏图片弹出页面 -->
<template>
  <div v-if="status">
    <div class="img_body">
      <img class="full_img" :src="data.imgs[imgUrl]" alt />
      <template v-for="(item, index) in data.click[currentImg]">
        <div
          class="click_btn"
          :id="index"
          :style="getStyle(item)"
          :key="index"
          @click="getAction(item.action)"
        ></div>
      </template>
      <div
        :class="resolving !== 1920 ? 'box_btn_back' : 'box_btn_back1920'"
        @click="backPage()"
      >
        <img
          src="https://res-static.hc-cdn.cn/cloudbu-site/china/zh-cn/关于华为云/exibihition/Hall/ui/close_web.png"
        />
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  props: {
    data: Object,
    status: {
      type: Boolean,
      default: false
    }
  },
  components: {},
  data() {
    //这里存放数据
    return {
      currentImg: 0,
      imgUrl: 0,
      resolving: ""
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getStyle(item) {
      let debug;
      if (process.env.NODE_ENV == "development") {
        debug = {
          backgroundColor: "red"
        };
      }
      return {
        left: (item.left / 2500) * 100 + "%",
        top: (item.top / 1080) * 100 + "%",
        width: (item.width / 1080) * 100 + "%",
        height: (item.height / 1080) * 100 + "%",
        ...debug
      };
    },
    getAction(action) {
      switch (action.type) {
        case "switch":
          this.imgUrl = action.img;
          this.currentImg = action.to;
          break;
        case "url":
          window.open(action.to);
      }
    },
    backPage() {
      //显示左上后退和右上回家按钮
      this.$store.commit("setHomeBack", true);
      this.$store.commit("setSelectTagImg", true);
      this.$store.commit("setImgListStatus", true);
      this.$emit("close-pop", null);
      this.imgUrl = 0;
      this.currentImg = 0;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (window.screen.width <= 1920 && window.screen.width > 1366) {
      this.resolving = 1920;
    } else if (window.screen.width > 1920) {
      this.resolving = 1920;
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.img_body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  // background-color: yellow;
  .full_img {
    width: 100vw;
    height: 100vh;
    z-index: 100;
  }
  .click_btn {
    cursor: pointer;
    position: absolute;
  }
}
.box_btn_back {
  cursor: pointer;
  position: absolute;
  top: 4%;
  right: 0%;
  img {
    width: 40%;
    height: 40%;
  }
}
.box_btn_back1920 {
  cursor: pointer;
  position: absolute;
  top: 7%;
  right: 2%;
  img {
    width: 40%;
    height: 40%;
  }
}
</style>
